<template>

  <div class="model" v-show="$store.state.isOpenLogin" @click="close">
    <div class="login" @click="$event.stopPropagation()">
        <table>
            <caption>
                <span :class="{on:select}" @click="select=true">手机号码登录</span> | 
                <span :class="{on:!select}" @click="getwei">微信扫码登录</span>
            </caption>
            <tbody v-show="select">
            <tr>
                <td>
                    <input type="tel" placeholder="请输入手机号" v-model="mobile">
                </td>
            </tr>
            <tr>
                <td class="slot">
                    <Slider ref="slider"></Slider>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="number" maxlength="6" placeholder="请输入短信验证码" v-model="code">
                    <button class="codebut" :class="{'disabled':!disabled}" @click="getCode" :disabled="!disabled">{{codemsg}}</button>
                </td>
            </tr>
            <tr>
                <td><button class="logbut" @click="dologin">登录</button></td>
            </tr>
        </tbody>
        <tr v-show="!select" id="weixin">
            <!-- <td><img src="@/assets/images/home/wx.png" alt="" class="wx"></td> -->
            
        </tr>
        </table>
        <img src="@/assets/images/login/userArrow.png" alt="" class="close" @click="close">
    </div>
    <Notice :msgStatus="msgStatus"></Notice>
  </div>

</template>

<script>
import qs from 'qs';
import Slider from './Slider.vue';
export default {
    
    data(){
        return{
            select:true,
            mobile:"18009792866",
            code:"3505",
            msgStatus:{
                info:"success",
                message:"成功",
                isshow:false,
            },
            codemsg:"获取验证码",
            time : 60,
        }
    },
    components:{
        Slider
    },
    computed:{
        disabled(){
            return this.codemsg=="获取验证码"?true:false
        }
    },
    methods:{
        close(){
            this.mobile = "";
            this.code = "";
            this.$refs.slider.onFail(); 
            this.$store.commit('changeOpenLogin',false);
            this.$emit("uploadHeader");
        },
        check(){
            let rex = /^1[3456789]\d{9}$/;
            if(!this.mobile) {
                this.msgStatus.info = "warning";
                this.msgStatus.message = "请输入手机号码";
                this.msgStatus.isshow=true;
                return false;
            }
            if(!rex.test(this.mobile)){
                this.msgStatus.info = "error";
                this.msgStatus.message = "请输入正确的手机号码";
                this.msgStatus.isshow=true;
                return false;
            }
            if(this.$store.state.pingtu == "fail"){
                this.msgStatus.info = "warning";
                this.msgStatus.message = "请完成人机校验";
                this.msgStatus.isshow=true;
                return false;
            }
            return true;
        },
        getCode(){
            if(this.check()){
            this.$ajax.post("/sendSMS",{
                phone:this.mobile,
            }).then(res=>{
                console.log(res);
            })
            
            let timer = setInterval(()=>{
                this.codemsg = `${this.time}s`;
                this.time--;
                if(this.time==0){
                    clearInterval(timer);
                    this.codemsg = "获取验证码";
                    this.time = 60;
                }
            },1000);
            }
        },
        dologin(){
            if(!this.check()) return false;
            if(!this.code){
                this.msgStatus.info = "warning";
                this.msgStatus.message = "请输入短信验证码校验";
                this.msgStatus.isshow=true;
                return false;
            }
            if(sessionStorage.getItem("uuid")){
                this.$ajax.post("/wechatUsers/binding",qs.stringify({
                    phone:this.mobile,
                    verifyCode:this.code,
                    uuid:sessionStorage.getItem("uuid"),
                    nickName:"丁狼你成哥"
                })).then(res=>{
                    if(code==0){
                        localStorage.setItem("x-auth-token",res["x-auth-token"]);
                        this.close();
                    }
                })
            }else{

            
            this.$ajax.post("/phoneRegin",qs.stringify({
                    verifyCode:this.code,
                    phone:this.mobile
            })).then(res=>{
                console.log(res);
                if(res.code === 0){  
                    localStorage.setItem("x-auth-token",res["x-auth-token"]);
                    this.msgStatus.info = "success";
                    this.msgStatus.message = "登录成功";
                    this.msgStatus.isshow = true;
                    this.close();
                }else{
                    this.msgStatus.info = "error";
                    this.msgStatus.message = res.message;
                    this.msgStatus.isshow=true;
                }
            })
        }
        },
        getwei(){
            this.select = false;
            let _this = this;
            new WxLogin({
                id: "weixin",
                appid: "wx67cfaf9e3ad31a0d",  // 这个appid要填死
                scope: "snsapi_login",
                // 扫码成功后重定向的接口
                redirect_uri: "https://sc.wolfcode.cn/cms/wechatUsers/shop/PC",
                // state填写编码后的url
                state: encodeURIComponent(window.btoa(process.env.VUE_APP_STATE_URL + _this.$route.path)),
                // 调用样式文件
                href: "data:text/css;base64,Lyogd3hsb2dpbi5jc3MgKi8NCi5pbXBvd2VyQm94IC50aXRsZSwgLmltcG93ZXJCb3ggLmluZm97DQogICAgZGlzcGxheTogbm9uZTsNCn0NCg0KLmltcG93ZXJCb3ggLnFyY29kZXsNCiAgICBtYXJnaW4tdG9wOiAyMHB4Ow0KfQ0K",
            });
        }
    },
}
</script>

<style lang="less" scoped>
.model{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    height: 100%;
    .login{
        background-color: #fff;
        width: 555px;
        height: 423px;
        position: relative;
        top: 20%;
        margin: auto;
        background-image: url(@/assets/images/login/loginBg.png);
        padding: 10px;
        table{
            width: 360px;
            margin: 20px auto;
            caption{
                width: 100%;
                span{
                    padding: 0 15px;
                    color: #ccc;
                    font-size: 18px;
                    cursor: pointer;
                }
                .on{
                    color: #333;
                }
            }
             td{
                height: 50px;
                padding: 10px 0;
                box-sizing: border-box;
                text-align: left;
                font-size: 18px;
                input[type=tel]{
                    width: 100%;
                    outline: none;
                    height: 50px;
                    box-sizing: border-box;
                    font-size: 18px;
                    padding: 0 10px;
                }
                input[type=number]{
                    width:256px;
                    height: 100%;
                    box-sizing: border-box;
                    padding: 0 10px;
                    border:1px solid #333;
                    font-size: 18px;
                }
                button{
                    background-color: #0A328E;
                    color:#fff;
                    height: 50px;
                    border: 0;
                    cursor: pointer;
                }
                .codebut{
                    width: 90px;
                    float: right;
                }
                .disabled{
                     filter: grayscale(70%);
                }
                .logbut{
                    width: 100%;
                   font-size: 18px;
                } 
            }
        
        }
        .close{
            position: absolute;
            top: 20px;
            right:20px;
            cursor:pointer;
         }
    }
    
}

</style>